<template>
	<div class="order">
		<van-tabs
			v-model:active="state.active"
			line-width="20px"
			title-inactive-color="#484848"
			:before-change="tabsBeforeChange"
		>
			<van-tab v-for="item of state.tabs" :name="item.value" :title="item.key" :key="item.value"></van-tab>
		</van-tabs>

		<van-list
			class="list"
			v-model:loading="state.loading"
			:finished="state.finished"
			finished-text="没有更多了"
			@load="getStoreOrderByShooteVcr"
		>
			<div class="list_item" v-for="item of state.orderList" :key="item.id">
				<div class="title">
					<span>提交时间：{{ item.pay_time }}</span>
					<span v-if="item.is_pick_up == 0" style="color: #fd7eb9">待拍摄</span>
					<span v-if="item.is_pick_up == 1">已完成</span>
				</div>
				<div class="btm">
					<van-image lazy-load round width="45px" height="45px" fit="cover" :src="item.head_img_url" />
					<div class="right">
						<div class="info">
							<div class="name">
								<span>{{ item.username }}</span>
								<img v-if="showVip(item)" class="vip" src="@/assets/img/vip_icon.png" />
								<img v-if="item.is_vip_video" class="certification" src="@/assets/img/certification_icon.png" />
							</div>
							<div class="address">{{ item.province }}-{{ item.city }}-{{ item.area }}</div>
						</div>
					</div>
				</div>
				<div class="btn">
					<div>
						费用：<span style="color: #f70865">¥{{ item.pay_amount }}</span>
					</div>
					<van-button v-if="item.is_pick_up == 0" size="large" v-debounce="() => submit(item.id)">拍摄完成</van-button>
				</div>
			</div>
		</van-list>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useMainStore } from '@/store/index';
import { storeOrderByShooteVcr, updateStoreVideoShooteState } from '@/api/my';
import showVip from '@/hooks/showVip';
import { Dialog, Toast } from 'vant';
import 'vant/es/dialog/style';

const mainStore = useMainStore();
const state = reactive<any>({
	active: '',
	loading: false,
	finished: false,

	tabs: [
		{ key: '全部', value: '' },
		{ key: '待拍摄', value: 0 },
		{ key: '已完成', value: 1 }
	],
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id,
		is_pick_up: ''
	},
	orderList: []
});

const submit = (order_id: number) => {
	Dialog.confirm({
		title: '提示',
		message: '确认拍摄完成?'
	})
		.then(async () => {
			// on confirm
			const res = await updateStoreVideoShooteState(mainStore.user_id, order_id);
			Toast.success('操作成功');
			state.pageInfo.pageIndex = 1;
			state.orderList = [];
			getStoreOrderByShooteVcr();
		})
		.catch(() => {
			// on cancel
		});
};

// tab切换
const tabsBeforeChange = (name: number | string): boolean => {
	state.pageInfo.is_pick_up = name;
	state.pageInfo.pageIndex = 1;
	state.orderList = [];
	getStoreOrderByShooteVcr();
	return true;
};

const getStoreOrderByShooteVcr = async () => {
  if (mainStore.storeIsLogin) {
    state.pageInfo.user_id = mainStore.storeInfo.member.user_id
  }
	const res = await storeOrderByShooteVcr(state.pageInfo);
	let { dataList } = res.data;
	if (dataList.length) {
		state.pageInfo.pageIndex++;
		state.orderList = [...state.orderList, ...dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
};
</script>

<style lang="scss" scoped>
:deep(.van-tabs) {
	width: 100%;
	.van-tabs__wrap {
		height: 55px !important;
		.van-tabs__nav {
			justify-content: space-between;
			.van-tab {
				flex: auto;
				padding: 0;
				font-size: 15px;
			}
			.van-tab--active {
				font-size: 16px;
				font-weight: bold;
			}
		}
	}
}
.order {
	min-height: 100vh;
	background: #f5f5f5;

	.list {
		min-height: calc(100vh - 80px);
		overflow: scroll;
		padding: 10px 15px;
		.list_item {
			@include flx-direction-center;
			height: fit-content;
			box-sizing: border-box;
			padding: 15px;
			margin-bottom: 10px;
			border-radius: 5px;
			background: white;
			.title {
				@include flx-justify-between;
				width: 100%;
				color: #4d4d4d;
				font-size: 13px;
			}
			.btm {
				@include flx-justify-between;
				width: 100%;
				height: 80px;
				box-sizing: border-box;
				padding: 15px;
				margin: 15px 0;
				border-radius: 10px;
				background: #f5f5f5;
				.right {
					@include flx-justify-between;
					height: 100%;
					flex: 1;
					margin-left: 10px;
					.info {
						.name {
							@include flx-align-center;
							margin-bottom: 5px;
							font-size: 16px;
							font-weight: bold;
							.vip {
								width: 16px;
								height: 14px;
								margin-left: 5px;
							}
							.certification {
								width: 54px;
								height: 20px;
								margin-left: 5px;
							}
						}
						.address {
							font-size: 12px;
							font-family: Noto Sans S Chinese;
							font-weight: 400;
							color: #808080;
						}
					}
					.delete {
						width: 13px;
						height: 15px;
					}
				}
			}
			.btn {
				@include flx-justify-between;
				width: 100%;
				div {
					font-size: 13px;
				}
				button {
					width: 70px;
					height: 26px;
					background: linear-gradient(-84deg, #f53d7d, #fb56b3);
					border-radius: 13px;
					font-size: 11px;
					color: #ffffff;
				}
			}
		}
	}
}
</style>
